<script setup lang='ts'>
import { useTag } from '@/pages/home/component/useTag'
import { useBiddingAdd, useBiddingEdit, useGetBiddingDetail } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import FlUpload from '@fl/components/fl-upload.vue'
import { Editor } from '@fl/origin-components/Editor/index'
import { cloneDeep } from 'lodash-es'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { category } = useTag()
const formRef = ref()
const state = {
    category: '',
    fileUrl: [],
    noticeName: '',
    noticeState: '2', //  1已发布 2未发布
    richText: '',
    scope: '1', // 1公开 2登录 3认证
}
const form = ref<any>(cloneDeep(state))

const rules = {
    category: [
        { message: '请选择类型', required: true, trigger: 'blur' },
    ],
    noticeName: [
        { message: '请输入标题', required: true, trigger: 'change' },
    ],
    richText: [
        { message: '请输入详情', required: true, trigger: 'change' },
    ],
    scope: [
        { message: '请选择查看范围', required: true, trigger: 'blur' },
    ],
}

const scopes = [
    {
        label: '公开',
        value: '1',
    },
    {
        label: '登录',
        value: '2',
    },
    {
        label: '认证',
        value: '3',
    },
]

const columns: any = [
    {
        colProps: {
            span: 12,
        },
        label: '公告标题',
        prop: 'noticeName',
    },
    {
        colProps: {
            span: 12,
        },
        label: '公告类型',
        options: category,
        prop: 'category',
        valueType: 'select',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: {
            clearable: false,
        },
        label: '查看范围',
        options: scopes,
        prop: 'scope',
        valueType: 'select',
    },
    {
        colProps: {
            span: 24,
        },
        label: '公告详情',
        prop: 'richText',
    },
    {
        colProps: {
            span: 24,
        },
        label: '附件',
        prop: 'fileUrl',
    },
]

const id = computed(() => {
    return route.query.id
})

function handleCancel() {
    router.push('/operations-pages/bidding/announcement')
}

function doView() {
    router.push({
        path: '/operations-pages/bidding/announcement-view',
        query: {
            form: JSON.stringify(form.value),
        },
    })
}

const { mutate } = useBiddingAdd()
const { mutate: mutateEdit } = useBiddingEdit()

async function doSave(noticeState: any) {
    // 1.表单校验
    const isVal = await formRef.value.formInstance.handleSubmit()

    if (!isVal)
        return

    const params = {
        ...form.value,
        fileUrl: JSON.stringify(form.value.fileUrl),
        noticeState,
    }

    if (params?.id) {
        mutateEdit(params, {
            onSuccess: () => {
                ElMessage({ message: '操作成功', type: 'success' })
                handleCancel()
            },
        })
    }
    else {
        mutate(params, {
            onSuccess: () => {
                ElMessage({ message: '操作成功', type: 'success' })
                handleCancel()
            },
        })
    }
}

const { data, isLoading } = useGetBiddingDetail(id)

watchEffect(() => {
    if (data.value) {
        // 编辑回显
        form.value = {
            ...form.value,
            ...data.value,
            category: Number.parseInt(data.value.category),
            fileUrl: data.value.fileUrl ? JSON.parse(data.value.fileUrl) : [],
        }
    }
})
</script>

<template>
    <ElCard shadow="never">
        <div class="py-18 text-16 c-#303133 font-600">
            {{ id ? '编辑公告' : '创建公告' }}
        </div>

        <SearchForm ref="formRef"
                    v-model="form"
                    :has-footer="false"
                    :columns="columns"
                    :rules="rules"
                    label-position="top"
        >
            <template #plus-field-richText>
                <Editor v-model="form.richText"
                        is-mall-admin
                        :height="300"
                />
            </template>

            <template #plus-field-fileUrl>
                <FlUpload :key="String(isLoading)"
                          v-model="form.fileUrl"
                          is-mall-admin
                          list-type="text"
                          accept="*"
                          :limit="20"
                          tips
                          :file-size="20"
                />
            </template>
        </SearchForm>

        <div class="text-center">
            <el-button @click="handleCancel">
                取消
            </el-button>

            <el-button @click="doSave(2)">
                保存草稿
            </el-button>

            <el-button type="primary"
                       @click="doView"
            >
                预览
            </el-button>

            <el-button type="primary"
                       @click="doSave(1)"
            >
                发布
            </el-button>
        </div>
    </ElCard>
</template>
